<template>
	<div>
		<div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
				<el-form-item>
					<router-link to="/dt/addNews">
						<el-button type="primary" id="btAddNews">添加</el-button>
					</router-link>				
				</el-form-item>
			</el-form>
		</div>
		

		<div>
			<el-table :data="pageListData" style="width: 100%">
		      <el-table-column type="index" width="55"></el-table-column>
		      <el-table-column prop="name" label="名称"></el-table-column>
		      <el-table-column prop="info_type" label="类型" :formatter="filterPageInfoType"></el-table-column>
		      <el-table-column label="操作">
		      		<template scope="scope">
		      			<el-button size="small" type="info" @click="cellManager(scope.$index,scope.row)">单元管理</el-button>
		      		</template>
			      <!-- <template scope="scope">
					<router-link :to="{name:'dt_checkNews',query:{id:scope.row.id}}" target="_blank">
				        <el-button
				          size="small"
				          type="info"
				          @click="editPage(scope.$index, scope.row)">
				          编辑</el-button>
				    </router-link>
			        <el-button
			          size="small"
			          type="danger"
			          icon="delete"
			          @click="delPage(scope.$index, scope.row)"></el-button>
			          
			      </template> -->
			    </el-table-column>

		    </el-table>
		</div>


		<!-- 单元选择 -->
		<el-dialog title="单元选择" :visible.sync="pageCellManagerDialog">
		  <el-form :model="cellToPageFormInfo">


		    <el-form-item>
				<el-transfer v-model="cellToPageFormInfo.cell" :props="{key: 'id',label: 'name'}" :data="cellSelectList"></el-transfer>
		    </el-form-item>

		    
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="pageCellManagerDialog = false">取 消</el-button>
		    <el-button type="primary" @click="addCellToPageBtn">确 定</el-button>
		  </div>
		</el-dialog>


	</div>
</template>

<script>
import _param from '../common/param.vue'
import _http from '../common/http.vue'
	export default{
		data() {
	        return {
	        	pageCellManagerDialog:false,
	        	formInline: {
		          
		        },
		        pageListData:[],
		        dataCount:0,
		        cellToPageFormInfo:{
		        	pageId:'',
		        	cell:[]
		        },
		        cellSelectList:[]
	        }
	    },
	    mounted(){
	    	this.getPageList()
	    },
	    methods:{
	    	filterPageInfoType(row,cloumn){
	    		if(row.info_type == _param.param.pageInfoType1){
	    			return '一级页面';
	    		}else if(row.info_type == _param.param.pageInfoType2){
	    			return '列表页面';
	    		}else if(row.info_type == _param.param.pageInfoType3){
	    			return '详情页面';
	    		}
	    	},
	    	cellManager(index,row){
	    		this.getCellList()
	    		this.getPageCellList(row.id)
	    		
	    		this.pageCellManagerDialog = true
	    	},
	    	getCellList(){
	    		_http.axiosRequest(this,'cellList',{},(res)=>{
	    			this.cellSelectList = res.data
	            })
	    	},
	    	getPageCellList(pageId){
	    		_http.axiosRequest(this,'pageCellList',{pageId:pageId},(res)=>{
	    			this.cellToPageFormInfo.cell = res.data
	            })
	    	},
	    	addCellToPageBtn(){
	    	},
	    	getPageList(){
	    		this.$ajax({
	                url: 'http://local.api.ditan/adminApi/pageList',
	                method: 'post',
	                response: 'json',
	                data: {type:1},
	            }).then((res) => {
	                this.pageListData = res.data;
	                //this.dataCount = res.data.dataCount
	            }).catch(function(err) {
	                console.log(err);
	            })
	    	},
	    	editPage(index,row){

	    	},
	    	delPage(index,row){

	    	}
	    }
	}
</script>